<template>
  <div class="register">
    <!-- 头像昵称 -->
    <div class="img_title">
      <i class="iconfont icon-unie64d title" v-if="show" @click="selectIcon"></i>
      <img class="img" width="80" height="80" src="../images/mm.jpg" v-else alt="userIcon">
      <input class="nick_name" type="text" placeholder="请输入昵称">
    </div>
    <!--css3实现波纹-->
    <div class="wave"></div>

    <div class="info">
      <p class="email">
        <i class="iconfont icon-youxiang-heshang"></i>
        <input
          class="email"
          type="text"
          name="email"
          id="email"
          placeholder="邮箱/手机号码"
          v-model="email"
          ref="email"
        >
      </p>
      <p class="passwd">
        <i class="iconfont icon-mima1"></i>
        <input
          class="passwd"
          :type="type"
          name="passwd"
          id="passwd"
          placeholder="密码"
          v-model="passwd"
          ref="passwd"
        >
        <i class="iconfont icon-mimakejian" @click="visualize"></i>
      </p>
      <p class="confirm">
        <i class="iconfont icon-mima1"></i>
        <input
          type="password"
          name="passwd"
          id="confirm"
          class="confirm"
          placeholder="确认密码"
          v-model="confirm"
          ref="confirm"
        >
      </p>
    </div>

    <div class="btn" @click="register">
      <a href="#" class="button lightbg-blue clearfix">
        <!-- btnText -->
        <span v-text="btnText"></span>
        <div class="icon">
          <div class="arrow iconfont"></div>
        </div>
      </a>
    </div>

    <!-- 隐藏内容 -->
    <input @change="fileChange" ref="file" type="file" name="file" id="file" v-show="false">
  </div>
</template>

<script>
import { openCenter, openLoading } from "@/common/toast.js"
import { checkEmail, checkPasswd, checkConfirm } from "@/common/checkForm.js"
import { CheckFormClass } from "@/common/checkFormClass.js"
// eslint-disable-next-line
/* eslint-disable */
export default {
  data() {
    return {
      show: true,
      checkForm: null,
      type: "password",
      typeFlag: false,
      btnText: "注册",
      filedata: null,
      passwd: "", // 密码
      confirm: "", // 确认密码
      email: "", //邮箱
      // 可以扩展验证码
    };
  },
  methods: {
    selectIcon() {
      this.show = false;
      this.$refs.file.click();
      console.log(this.$refs.file);
    },
    fileChange(e) {
      console.log("e==========>", e.target.files);
    },
    visualize() {
      console.log("可视化密码");
      if(!this.typeFlag) {
        this.type = "text";
      } else {
        this.type = "password";
      }
      this.typeFlag = !this.typeFlag;
    },
    // 注册
    register() {
      var self = this;
      var email = self.getEmail();
      var passwd = self.getPasswd();
      var confirm = self.getConfirm();
      self.checkForm = CheckFormClass.init(email, passwd, confirm);
      this.checkEmail_();
    },

    checkEmail_() {
      var self = this;
      if(!self.checkForm.checkEmail()) {
        openCenter(self, "邮箱格式不正确");
        this.$refs.email.focus();
        return ;
      } else {
        this.$refs.email.blur();
        this.checkPasswd_();
      }
    },

    checkPasswd_() {
      var self = this;
      if(!self.checkForm.checkPasswd()) {
        openCenter(self, "密码格式不正确");
        this.$refs.passwd.focus();
        return ;
      } else {
        this.$refs.passwd.blur();
        this.checkConfirm_();
      }
    },
    checkConfirm_() {
      var self = this;
      if(!self.checkForm.checkConfirm()) {
        openCenter(self, '两次输入的密码不一致');
        this.$refs.confirm.focus();
        return ;
      } else {
        this.$refs.confirm.blur();
      }
    },

    getEmail() {
      this.email = this.$refs.email.value;
      return this.email;

    },

    getPasswd() {
      this.passwd = this.$refs.passwd.value;
      return this.passwd;
    },

    getConfirm() {
      this.confirm = this.$refs.confirm.value;
      return this.confirm;
    }
  }
};
</script>


<style lang="scss" scoped>
@import "../style/vars.scss";

div.btn {
  cursor: pointer;
  display: flex;
  justify-content: center; // 设置内容居中
  margin-top: 40px;
  -webkit-tap-highlight-color: transparent;
  -webkit-tap-highlight-color: #fff;
  -webkit-user-select: none;
  -moz-user-focus: none;
  -moz-user-select: none;
  // 去掉背景色
  a,
  a:hover,
  a:active,
  a:visited,
  a:link,
  a:focus {
    -webkit-tap-highlight-color: transparent;
    -webkit-tap-highlight-color: #fff;
    outline: none;
    text-decoration: none;
  }
  .lightbg-blue {
    text-align: center;
    .icon {
      margin-top: 6px;
      float: right;
    }
    display: flex;
    background-color: $background-color2;
    color: #dafffe;
    -webkit-box-shadow: 0px 0px 0px 1px #fea724 inset,
      0px 0px 0px 2px #fcd49d inset, 0px 4px 0px 0px #f8a72c,
      0px 5px 0px 0px #fcd49d, 0px 8px 0px 0px #fea724;
    -moz-box-shadow: 0px 0px 0px 1px #fea724 inset,
      0px 0px 0px 2px #fcd49d inset, 0px 4px 0px 0px #f8a72c,
      0px 5px 0px 0px #fcd49d, 0px 8px 0px 0px rgba(0, 0, 0, 0.15);
    -ie-box-shadow: 0px 0px 0px 1px #fea724 inset, 0px 0px 0px 2px #fcd49d inset,
      0px 4px 0px 0px #f8a72c, 0px 5px 0px 0px #fcd49d, 0px 8px 0px 0px #fea724;
    box-shadow: 0px 0px 0px 1px #fea724 inset, 0px 0px 0px 2px #fcd49d inset,
      0px 4px 0px 0px #f8a72c, 0px 5px 0px 0px #fcd49d, 0px 8px 0px 0px #fea724;
  }
  .button {
    width: 9.5em;
    display: block;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    -ie-border-radius: 6px;
    border-radius: 6px;
    padding: 0.48em 0.8em;
    text-shadow: rgba(0, 0, 0, 0.5) 0px -1px 0px;
    font-size: 18px;
    font-weight: 700;
    -webkit-transition-property: background-color;
    -webkit-transition-duration: 0.15s;
    -webkit-transition-timing-function: ease-in-out;
    cursor: pointer;
    text-decoration: none;
    margin-bottom: 20px;
  }
  .clearfix:after {
    content: ".";
    visibility: hidden;
    display: block;
    height: 0;
    clear: both;
  }
}
.info {
  margin-top: -80px;
  p {
    margin-bottom: 20px;
  }
  i {
    font-size: 50px;
    color: $background-color2;
    vertical-align: middle;
  }
  i.icon-mimakejian {
    font-size: 40px;
    cursor: pointer;
  }
  input.email,
  input.passwd,
  input.confirm {
    vertical-align: middle;
    height: 30px;
    outline: none;
    border: none;
    border-bottom: 1px $input-color solid;
    width: 250px;
    margin-left: 10px;
    font-size: 24px;
    background-color: #fff;
  }
  input.passwd {
    width: 210px;
  }
  input::-webkit-input-placeholder {
    color: $input-font-color;
  }
}
.register {
  overflow: hidden;
  height: 100%;
}
// 头像昵称
.img_title {
  position: relative;
  z-index: 1000;
  background: $background-color2;
  border-radius: 0 0 60% 60%;
  display: -webkit-flex;
  display: flex; // 设置盒子为弹性盒子模型
  flex-direction: column; // 设置轴方向
  justify-content: center; // 设置内容居中
  text-align: center;
  i {
    font-size: 80px;
    color: $color;
    margin-top: $margin-top;
  }
  i.title {
    cursor: pointer;
  }
  img.img {
    text-align: center;
    margin: $margin-top auto 0 auto;
    height: 80px;
    width: 80px;
    border-radius: 50%;
  }
  input.nick_name {
    background-color: $background-color2;
    width: 200px;
    height: 50px;
    text-align: center;
    margin: auto;
    font-size: 20px;
    border: none;
    outline: none;
    color: $color;
    margin-top: $margin-top;
    margin-bottom: $margin-top;
    border-bottom: 1px #fff solid;
  }
  input::-webkit-input-placeholder {
    /* placeholder颜色  */
    color: $color;
    opacity: 0.5;
  }
}

/*css3波纹*/
.wave {
  position: relative;
  width: 100%;
  height: 3.35rem;
  background-color: $background-color3;
  top: -3.133333rem;
}
.wave:before,
.wave:after {
  content: "";
  position: absolute;
  width: 400px;
  height: 10rem;
  top: 0;
  left: 50%;
  background-color: rgba(255, 255, 255, 0.4);
  border-radius: 45%;
  transform: translate(-50%, -70%) rotate(0);
  animation: rotate 6s linear infinite;
  z-index: 10;
}

.wave:after {
  border-radius: 47%;
  background-color: rgba(255, 255, 255, 0.9);
  transform: translate(-50%, -70%) rotate(0);
  animation: rotate 10s linear -5s infinite;
  z-index: 20;
}

@keyframes rotate {
  50% {
    transform: translate(-50%, -73%) rotate(180deg);
  }
  100% {
    transform: translate(-50%, -70%) rotate(360deg);
  }
}
</style>

